<!DOCTYPE html>
<html>
	<head>
		<title>角色分配</title>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">
		<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

		<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
		<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
		<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
		
		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/config.js"></script>

		<style>
			body,
			.el-tree {
				background-color: #eee;
			}

			.el-tree-node {
				margin: 0.15em 0 !important;
			}

			/* 悬浮时颜色更深一点 */
			.el-tree-node__content:hover {
				background-color: #CFE8FC !important;
			}
		</style>
	</head>
	<body>
		<div class="vue-box sbot" style="display: none;" :style="'display: block;'">
			<!-- ------- 内容部分 ------- -->
			<div class="s-body">
				<!-- 表格 -->
				<div style="padding: 1em 2em;">
					<el-form>
						<div class="c-title">所有角色</div>
						<el-tree ref="tree" :data="dataList" show-checkbox node-key="id" :default-expand-all="true"
							:default-checked-keys="selectList" :expand-on-click-node="false" :check-on-click-node="true"
							:check-strictly="false">
							<span class="custom-tree-node" slot-scope="s">
								<span style="color: #2D8CF0;">{{ s.data.name }}</span>

								<el-button type="text" style="color: #606266;" @click.stop="temp(s.data)">
									{{checkTempAuth(s.data) ? '清除临时角色' : '临时角色'}}
								</el-button>

								<span style="color: #999;" v-if="s.data.remark">&emsp;———— {{s.data.remark}} </span>
							</span>
						</el-tree>
					</el-form>
				</div>
			</div>
			<!-- ------- 底部按钮 ------- -->
			<div class="s-foot">
				<el-button size="mini" type="success" @click="checkedAll()">全选</el-button>
				<el-button size="mini" type="primary" @click="ok()">确定</el-button>
				<el-button size="mini" @click="sa.closeCurrIframe()">取消</el-button>
			</div>

			<!-- 临时授权 -->
			<el-dialog title="临时授权" :visible.sync="dialogTempVisible" :fullscreen="true" width="80%">
				<el-form :model="tempData" :rules="dialogTempVisible" label-width="150px">
					<el-form-item label="授权时间">
						<el-date-picker v-model="tempDateTime" type="datetimerange"
							:picker-options="tempDateTimeOptions" range-separator="至" start-placeholder="开始日期"
							end-placeholder="结束日期" align="right">
						</el-date-picker>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogTempVisible = false;tempDateTime = ''">取消</el-button>
					<el-button type="primary" @click="saveTemp">确定</el-button>
				</div>
			</el-dialog>
		</div>
		<script src="../../sa-resources/menu-list.js"></script>
		<script src="../../sa-resources/index/admin-util.js"></script>

		<script src="../../sa-resources/api.js"></script>
		<script src="../../sa-resources/wuyan.js"></script>
		<script src="../../sa-resources/element-ui-helper.js"></script>

		<script>
			var app = new Vue({
				el: '.vue-box',
				data: {
					id: parseInt(sa.p('id', 0)),
					dataList: [], // 数据集合
					selectList: [], // 默认选中
					ywList: [], // 一维数组
					// 选中参数
					chooseData: {
						row: null,
						field: null,
						fieldValue: null,
						index: null,
					},
					tempData: {
						startTime: '',
						endTime: '',
					},
					// 临时授权的日期时间选择器配置
					tempDateTime: '',
					tempDateTimeOptions: {
						shortcuts: [{
							text: '最近一周',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit('pick', [start, end]);
							}
						}, {
							text: '最近一个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								picker.$emit('pick', [start, end]);
							}
						}, {
							text: '最近三个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
								picker.$emit('pick', [start, end]);
							}
						}]
					},
					dialogTempVisible: false,
				},
				created: function() {

					axiosConfig(axios)

					let loading = elLoadding({
						that: this
					})

					// 功能列表
					let url = getUrl('pub-role', 'list')
					let http = getHttp(axios, 'pub-role', 'list')
					let queryParams = []
					http(url, {
							params: {
								isPage: false,
								params: JSON.stringify(queryParams)
							}
						}).then(res => {
							this.ywList = res.list ? res.list : []; // 数据

							this.ywList = JSON.stringify(this.ywList)
							this.ywList = JSON.parse(this.ywList)

							this.dataList = res.list ? res.list : []; // 数据
						})
						.catch((err) => {
							sa.error(err.msg)
							loading.close()
						});

					url = getUrl('pub-account-role', 'list')
					http = getHttp(axios, 'pub-account-role', 'list')
					http(url, {
							params: {
								isPage: false,
								params: JSON.stringify([{
									left: 'userId',
									op: 'eq',
									right: [this.id]
								}])
							}
						}).then(res => {
							if (res.list) {
								res.list.forEach(t => {
									this.selectList.push(t.roleId)
								})
							}

							this.$refs.tree.setCheckedKeys(this.selectList)

							loading.close();
						})
						.catch((err) => { // 请求失败处理
							sa.error(err.msg);
							loading.close();
						});
				},
				methods: {
					// 保存
					ok: function() {
						let items = this.$refs.tree.getCheckedNodes()

						let params = []
						items.forEach(item => {
							params.push({
								userId: this.id,
								roleId: item.id
							})
						})

						let loading = elLoadding({
							that: this
						})

						let url = getUrl('pub-account-role', 'adds')
						let http = getHttp(axios, 'pub-account-role', 'adds')
						http(url, params).then(res => {
								sa.ok('角色已分配')

								setTimeout(() => {
									sa.closeCurrIframe();
								}, 1500)

								loading.close();
							})
							.catch((err) => { // 请求失败处理
								sa.error(err.msg);
								loading.close();
							});
					},

					/**
					 * 临时授权配置
					 * @param {Object} data
					 */
					temp(data) {
						if (data.temp) {
							data.temp = null
							this.$refs['tree'].setChecked(this.chooseData.row, false, true)
							this.$refs['tree'].updateKeyChildren(data.id, data)
							this.dialogTempVisible = false
						} else {
							this.chooseData.row = data
							this.dialogTempVisible = true
						}
					},

					/**
					 * 临时授权配置确认
					 */
					saveTemp() {
						if (!this.tempDateTime) {
							return
						}

						this.chooseData.row.temp = {
							startTime: getNowDate(this.tempDateTime[0]),
							endTime: getNowDate(this.tempDateTime[1]),
							cfgTemp: 1,
						}

						this.$refs['tree'].setChecked(this.chooseData.row, true, true)
						this.$refs['tree'].updateKeyChildren(this.chooseData.row.id, this.chooseData.row)
						
						this.tempDateTime = ''
						this.dialogTempVisible = false
					},

					// 全选/ 取消全选
					checkedAll: function() {
						if (this.$refs.tree.getCheckedKeys().length != this.ywList.length) {
							this.$refs['tree'].setCheckedNodes(this.ywList);
						} else {
							this.$refs['tree'].setCheckedNodes([]);
						}
					},

					/**
					 * 校验是否已分配临时权限
					 * @param {Object} data
					 */
					checkTempAuth(data) {
						let bl = data && data.temp && data.temp.cfgTemp ? true : false
						return bl
					}
				},

			})
		</script>
	</body>
</html>
